<!DOCTYPE html>
<html>

	<head>
		<title>轨迹</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" href="themes/metro/easyui.css" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eX0oWIhkTt7PMIWp8r2t0MussrF2CKSW"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

		<style>
			body,
			html,
			#allmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
				background-color: white;
			}
			
			.easyui-panel {
				padding: 10px;
				margin-bottom: 15px;
				width: 100%;
			}
			
			.easyui-textbox {
				margin: 5px;
			}
			
			.easyui-linkbutton {
				width: 100%;
			}
		</style>
		<style>
			.BMap_Marker img {
				border-radius: 18px;
			}
		</style>
	</head>

	<body>
		<div class="easyui-layout" style="width:100%;height:100%;">
			<div id="content" region="center" title="地图展示" style="padding:0px;">
				<div id="allmap"></div>
			</div>
			<div region="east" split="true" title="操作页面" style="width:250px; padding: 15px 5px;">
				<div class="easyui-panel operation" title="添加签到点">
					<div style="margin-bottom:10px">
						<div>点击地图选中签到点</div>
						<input class="easyui-textbox" style="width:100%;height:32px" readonly="readonly" id="selectloglat">
					</div>
					<div style="margin-bottom:10px">
						<div>签到点名称</div>
						<input class="easyui-textbox" data-options="prompt:'请输入名称',validType:'text'" style="width:100%;height:32px" id="signpointname">
					</div>
					<a href="#" class="easyui-linkbutton" id="setsignpoint">添加</a>
				</div>
				<div class="easyui-panel" title="删除签到点">
					<div style="margin-bottom:10px">
						<div>请先选择签到点</div>
						<input class="easyui-textbox" style="width:100%;height:32px" readonly="" id="signpointnamedel">
					</div>
					<a href="#" class="easyui-linkbutton" id="delsignpoint">删除</a>
				</div>
			</div>
		</div>
	</body>
</html>

<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map('allmap');
	var poi = new BMap.Point(121.533453, 31.2349);
	map.centerAndZoom(poi, 13);
	map.enableScrollWheelZoom();

	// 添加缩放控件
	var navigationControl = new BMap.NavigationControl({
		// 靠左上角位置
		anchor: BMAP_ANCHOR_TOP_LEFT,
		// LARGE类型
		type: BMAP_NAVIGATION_CONTROL_LARGE,
		// 启用显示定位
		enableGeolocation: true
	});
	map.addControl(navigationControl);

	//点击地图，获取经纬度
	map.addEventListener("click", function(e) {
		page.selectlng = e.point.lng;
		page.selectlat = e.point.lat;
		page.selectlng_lat = e.point.lng + "," + e.point.lat;
	});

	document.getElementById('setsignpoint').addEventListener('click', function() {
		var signpointname = document.getElementById('signpointname').value;
		if(page.selectlng_lat.length == 0) {
			alert("请现在地图上选择签到点");
			return;
		}
		if(signpointname.length == 0) {
			alert("请设置签到点名称");
			return;
		}

		//调用网络接口请求设置签到点
		addSignPoint(new BMap.Point(page.selectlng, page.selectlat), signpointname);
	});

	function addSignPoint(point, name) {
		var myIcon = new BMap.Icon("face.jpg", new BMap.Size(36, 36), {
			anchor: new BMap.Size(18, 57)
		});
		myIcon.setImageSize(new BMap.Size(36, 36));

		var marker = new BMap.Marker(point, {
			icon: myIcon
		}); //创建marker对象
		var shadowIcon = new BMap.Icon("face_bg.png", new BMap.Size(50, 64), {
			anchor: new BMap.Size(25, 64)
		});
		shadowIcon.setImageSize(new BMap.Size(50, 64));

		marker.setShadow(shadowIcon);
		var label = new BMap.Label(name, {
			offset: new BMap.Size(0, 60)
		});
		marker.setLabel(label);
		label.setStyle({
			color: "#467711",
			fontSize: "14px",
			fontFamily: "微软雅黑",
			border: "none",
			borderRadius: "2px",
			padding: "0px 5px",
			backgroundColor: "rgba(0,0,0,0)",
			fontWeight: "bold"
		});

		marker.setTitle(name);
		map.addOverlay(marker);
		marker.setAnimation(BMAP_ANIMATION_DROP);
		marker.addEventListener("click", function(e) {
			/*
			 * 设置新的标注位置
			 */
			marker.setPosition(new BMap.Point(121.540172, 31.238914));
			/*
			 * 修改移动轨迹
			 */
			polyline.setPath([
				new BMap.Point(121.540172, 31.238914),
				new BMap.Point(121.538448, 31.24231),
				new BMap.Point(121.540927, 31.242526),
				new BMap.Point(121.540388, 31.243607),
				new BMap.Point(121.542688, 31.244008),
				new BMap.Point(121.541861, 31.246169),
				new BMap.Point(121.542795, 31.246107),
				point
			])
		})
	}

	/*
	 * 轨迹
	 */
	var polyline = new BMap.Polyline([], {
		strokeColor: "#DC1118",
		strokeWeight: 6,
		strokeOpacity: 0.7
	});
	map.addOverlay(polyline);
</script>